<template>
	<view class="active-container">
		<!-- 头部区域 -->
		<view class="header">
			<!-- 头部标题 -->
			<view class="header-title">给您提供更靠谱的活动</view>
			<view class="search-box">
				<image class="search-icon" src="../../static/images/icon-search.png" mode=""></image>
				<view class="search-inp">
					<input type="text" v-model="query.title" confirm-type="search" @confirm="handleSearch" placeholder="请输入活动名称">
				</view>
			</view>
			<!-- <my-search placeholder="请输入活动名称"></my-search> -->
			<!-- <my-swiper class="swiper-container"></my-swiper> -->
		</view>
		<view class="body">
			<!-- <my-notice :notice="notice"></my-notice> -->
			<view class="activity-list">
				<view class="item" v-for="item in activelist" :key="item.id" @click="toDetail(item.id)">
					<view class="item-pic">
						<image :src="item.eimg" mode=""></image>
					</view>
					<view class="item-main">
						<view class="item-title">
							{{item.title}}
						</view>
						<view class="item-con">
							{{item.introduce}}
						</view>
					</view>
				</view>
				<!-- <view class="active-item" v-for="item in activelist" :key="item.id" @click="toDetail(item.id)">
					<view class="item-top">
						<image :src="item.eimg" class="avater"></image>
						<text class="society">{{ item.title }}</text>
					</view>
					<view class="item-bottom">{{ item.introduce }}</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getActivityData
	} from '@/api/xiehui.js'
	export default {
		data() {
			return {
				// 消息通知信息
				notice: {
					name: '某某某获得一个协会荣誉',
					time: '刚刚'
				},
				// 协会列表数据
				activelist: [],
				query: {
					title:'',
					limit: 100,
					page: 1
				},
			}
		},
		onLoad() {
			this.getData();
		},
		onShow() {

		},
		onPullDownRefresh(){
			console.log("下拉刷新");
			this.query.page=1;
			this.query.title='';
			this.getData();
			uni.stopPullDownRefresh(); 
		},
		methods: {
			toDetail(id){
				uni.navigateTo({
					url:'/pages/activeCenter/detail?id='+id
				})
			},
			handleSearch(e){
				this.getData();
			},
			getData() {
				uni.showLoading({
					title:'加载中...'
				})
				getActivityData(this.query).then((res) => {
					this.activelist = res.data;
					uni.hideLoading();
				})
			},
		},
	}
</script>

<style lang="scss">
	.search-box{
		height: 60rpx;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 0 26rpx;
		border-radius: 50rpx;
	}
	.search-box .search-icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
	.search-box .search-inp{
		flex: 1;
	}
	.search-box .search-inp input{
		font-size: 24rpx;
	}
	.active-container {

		.header {
			background-image: linear-gradient(to bottom, #E4F0FF, #F6F6F6);
			padding: 57rpx 30rpx 0;
		}

		.body {
			min-height: calc(100% - 504rpx);
			padding: 20rpx 30rpx 120rpx;
			background-color: #F6F6F6;
		}

		// 头部标题
		.header-title {
			text-align: center;
			color: #1E80FD;
			font-size: 42rpx;
			margin-bottom: 30rpx;
		}

		// 轮播图区域
		.swiper-container {
			margin: 30rpx 0;
		}
	}
	
	.active-item {
	  width: 100%;
	  background-color: #fff;
	  margin-top: 20rpx;
	  border-radius: 24rpx;
	  display: flex;
	  flex-direction: column;
	  padding: 30rpx 24rpx 60rpx 30rpx;
	  font-size: 24rpx;
	
	  .item-top {
	    display: flex;
	    align-items: center;
	    margin-bottom: 36rpx;
	
	    .avater {
	      width: 85rpx;
	      height: 85rpx;
	      background-color: #e3e3e3;
	      border-radius: 43rpx;
	    }
	
	    .society {
	      font-size: 32rpx;
	      font-weight: 600;
	      margin: 0 13rpx 0 24rpx;
	    }
	
	    .tag {
	      width: 78rpx;
	      height: 38rpx;
	      background-color: #CBE3FF;
	      color: #0F7CFF;
	      border-radius: 10rpx;
	      font-weight: 600;
	      text-align: center;
	      line-height: 38rpx;
	    }
	  }
	
	  .item-bottom {
	    font-size: 28rpx;
	    line-height: 22px;
	  }
	}
	
	.activity-list{
		
	}
	
	.activity-list .item{
		margin-top: 20rpx;
		padding: 32rpx 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
	}
	.activity-list .item .item-main{
		flex: 1;
	}
	.activity-list .item .item-pic{
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		margin-right: 24rpx;
		overflow: hidden;
		background-color: #ddd;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.activity-list .item .item-title{
		font-size: 32rpx;
		font-weight: bold;
	}
	.activity-list .item .item-tag{
		width: 78rpx;
		height: 38rpx;
		    flex-shrink: 0;
		background: #CBE3FF;
		border-radius: 10rpx;
		color: #0F7CFF;
		font-size: 22rpx;
		margin-left: 12rpx;
		text-align: center;
		line-height: 38rpx;
	}
	.activity-list .item .item-con{
		margin-top: 20rpx;
		font-size: 28rpx;
	}
</style>
